<template>
	<view class="openMapAPP">
		<uni-popup ref="popup" type="bottom">
			<view class="select-map">
				<view class="box">
					<view class="head">
						<view class="title">使用地图打开</view>
						<view class="title-en">如果点击无响应，可能是您还没有安装该APP</view>
					</view>
					<view class="list">
						<view class="item" @click="toMapAPP(1)">腾讯地图</view>
						<view class="item" @click="toMapAPP(2)">百度地图</view>
						<view class="item" @click="toMapAPP(3)">高德地图</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "openMapApp",
		data() {
			return {
				form: {
					'latitude': '',
					'longitude': '',
					'name': '',
				}
			};
		},
		methods: {
			openMask(form) {
				this.form = form;
				this.$refs.popup.open('bottom');
			},
			toMapAPP(index = 1) {
				try {
					let url = "",
						key = "NJUBZ-QAALI-QAQG4-5GK6O-2SPLF-M5FUY";
					let latitude = this.form.latitude,
						longitude = this.form.longitude,
						name = this.form.name;
					let USER_Agent = navigator.userAgent;
					let MOBILE_IOS = /(iPhone|iPad|iPod|iOS)/i;
					var MOBILE_Android = /(Android)/i;
					let WX = /(micromessenger)/i;
					if (MOBILE_Android.test(USER_Agent)) { //判断是安卓端
						switch (index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${key}`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							window.location.href = url
						} else {
							alert("本机未安装指定的地图应用");
						}
					} else if (MOBILE_IOS.test(USER_Agent)) { //ios
						switch (index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${key}`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							window.location.href = url
						} else {
							alert("本机未安装指定的地图应用");
						}
					} else {
						aler('当前APP暂不支持')
					}

				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss">
	.select-map {
		.box {
			border-radius: 20rpx 20rpx 0 0;
			background-color: #FFFFFF;

			.head {
				padding: 50rpx 40rpx 40rpx;
				text-align: center;

				.title {
					font-size: 32rpx;
					color: #010101;
					margin-bottom: 30rpx;
					font-weight: bold;
				}

				.title-en {
					color: #898989;
					font-size: 24rpx;
					line-height: 32rpx;
				}
			}

			.list {
				text-align: center;

				.item {
					line-height: 100rpx;
					font-size: 28rpx;
					color: #363c56;
					border-top: 2rpx solid #efefef;
				}
			}
		}
	}
</style>
